class Magnifier {
    constructor(smallBox, bigBox, mask, mm) {
        this.oSmallBox = smallBox;
        this.oBigBox = bigBox;
        this.oMask = mask;
        this.oMm = mm;
        this.eventBind();
    }

    mouseover() {
        let that = this;
        this.oSmallBox.onmouseover = function() {
            that.oBigBox.style.display = "block";
            that.oMask.style.display = "block";
        }
    }

    mouseout() {
        let that = this;
        this.oSmallBox.onmouseout = function() {
            that.oBigBox.style.display = "none";
            that.oMask.style.display = "none";
        }
    }

    mousemove() {
        let that = this;
        this.oSmallBox.onmousemove = function(evt) {
            let e = evt || event;
            let left = e.pageX - that.oMask.offsetWidth / 2 - that.oSmallBox.offsetLeft;
            let top = e.pageY - that.oMask.offsetHeight / 2 - this.offsetTop;


            if (left < 0) {
                left = 0;
            }

            let maxLeft = this.offsetWidth - that.oMask.offsetWidth;

            if (left > maxLeft) {
                left = maxLeft;
            }

            if (top < 0) {
                top = 0;
            }

            let maxTop = this.offsetHeight - that.oMask.offsetHeight;

            if (top > maxTop) {
                top = maxTop;
            }

            //计算比例关系
            // let n = 4;

            //x和y分别代表大图片移动的距离
            // let x = n * left;
            // let y = n * top;

            // 写个复杂的
            let x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
            let y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;


            that.oMask.style.left = left + "px";
            that.oMask.style.top = top + "px";

            that.oBigBox.style.backgroundPositionX = -x + "px";
            that.oBigBox.style.backgroundPositionY = -y + "px";
        }
    }
    onclick() {
        let a = this;
        for (let i = 0; i < this.oMm.length; i++) {
            this.oMm[i].onclick = function() {
                switch (i) {
                    case 0:
                        a.oSmallBox.style.backgroundImage = "url(../img/687f13ca980ae047a4c508318be79c41 (1).jpg)"
                        a.oBigBox.style.backgroundImage = "url(img/13.jpg)"
                        break;
                    case 1:
                        a.oSmallBox.style.backgroundImage = "url(img/10.jpg)"
                        a.oBigBox.style.backgroundImage = "url(img/10.jpg)"
                        break;
                    case 2:
                        a.oSmallBox.style.backgroundImage = "url(img/11.jpg)"
                        a.oBigBox.style.backgroundImage = "url(img/11.jpg)"
                        break;
                    case 3:
                        a.oSmallBox.style.backgroundImage = "url(img/12.jpg)"
                        a.oBigBox.style.backgroundImage = "url(img/12.jpg)"
                        break;
                    case 4:
                        a.oSmallBox.style.backgroundImage = "url(img/6.jpg)"
                        a.oBigBox.style.backgroundImage = "url(img/6.jpg)"
                        break;
                }
            }
        }
    }
    eventBind() {
        this.mouseover();
        this.mouseout();
        this.mousemove();
        this.onclick();
    }
}